<template>
  <div class="indexTop">
    <div class="indexTop-left">
      <div @click="toIndex">首页</div>
      <div>/</div>
      <div>{{ value }}</div>
      <div>/</div>
      <div>{{ values }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value", "values"],
  methods: {
    toIndex() {
      this.$router.push("/home/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.indexTop {
  height: 8vh;
  background-color: #eff2f7;
  padding: 0 10px;
  .indexTop-left {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 8vh;
    font-size: 14px;
    color: #97a8be;
    div {
      margin-left: 10px;
    }
  }
  .indexTop-left > div:nth-child(1),
  .indexTop-left > div:nth-child(3) {
    color: black;
    cursor: pointer;
  }
  .indexTop-left > div:nth-child(1):hover,
  .indexTop-left > div:nth-child(3):hover {
    color: skyblue;
  }
}
</style>
